<template>
	<view class="alarm">
		<view style="height: 1rpx;"></view>

		<view class="title">心率</view>
		<view class="alarm-range">
			<view class="alarm-range-item">
				<view class="text">下限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="BPM.downBpm" />
			</view>
			<view class="alarm-range-item">
				<view class="text">上限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="BPM.upBpm" />
			</view>
		</view>

		<view class="title">舒张压</view>
		<view class="alarm-range">
			<view class="alarm-range-item">
				<view class="text">下限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="BP.downSbp" />
			</view>
			<view class="alarm-range-item">
				<view class="text">上限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="BP.upSbp" />
			</view>
		</view>

		<view class="title">收缩压</view>
		<view class="alarm-range">
			<view class="alarm-range-item">
				<view class="text">下限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="BP.downDbp" />
			</view>
			<view class="alarm-range-item">
				<view class="text">上限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="BP.upDbp" />
			</view>
		</view>

		<view class="title">尿酸</view>
		<view class="alarm-range">
			<view class="alarm-range-item">
				<view class="text">下限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="UA.downUa" />
			</view>
			<view class="alarm-range-item">
				<view class="text">上限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="UA.upUa" />
			</view>
		</view>

		<view class="title">血氧</view>
		<view class="alarm-range">
			<view class="alarm-range-item">
				<view class="text">上限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="SPO.down" />
			</view>
		</view>

		<view class="title">总胆固醇/血脂</view>
		<view class="alarm-range">
			<view class="alarm-range-item">
				<view class="text">上限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="TC.upTc" />
			</view>
		</view>

		<view class="title">血酮</view>
		<view class="alarm-range">
			<view class="alarm-range-item">
				<view class="text">上限</view>
				<view class="line"></view>
				<input type="digit" class="value" v-model="BHB.upBhb" />
			</view>
		</view>

		<view class="title">血糖</view>
		<view class="alarm-range-wrapper">
			<view style="height: 1rpx;"></view>
			<view class="time-wrapper" @click="onOpenTimerPicker('breakfastTime')">
				<view class="time-label">早饭时间 :</view>
				<view class="time-value">
					<view class="value">{{ BG.breakfastTime }}</view>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
			</view>
			<view class="time-wrapper" @click="onOpenTimerPicker('lunchTime')">
				<view class="time-label">午饭时间 :</view>
				<view class="time-value">
					<view class="value">{{ BG.lunchTime }}</view>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
			</view>
			<view class="time-wrapper" @click="onOpenTimerPicker('dinnerTime')">
				<view class="time-label">晚饭时间 :</view>
				<view class="time-value">
					<view class="value">{{ BG.dinnerTime }}</view>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
			</view>
			<view class="sub-title">空腹 :</view>
			<view class="sub-alarm-range">
				<view class="sub-alarm-range-item">
					<view class="text">下限</view>
					<view class="line"></view>
					<input type="digit" class="value" v-model="BG.downEmpty" />
				</view>
				<view class="sub-alarm-range-item">
					<view class="text">上限</view>
					<view class="line"></view>
					<input type="digit" class="value" v-model="BG.upEmpty" />
				</view>
			</view>
			<view class="sub-title">餐后一小时 :</view>
			<view class="sub-alarm-range">
				<view class="sub-alarm-range-item">
					<view class="text">下限</view>
					<view class="line"></view>
					<input type="digit" class="value" v-model="BG.downAfter1" />
				</view>
				<view class="sub-alarm-range-item">
					<view class="text">上限</view>
					<view class="line"></view>
					<input type="digit" class="value" v-model="BG.upAfter1" />
				</view>
			</view>
			<view class="sub-title">餐后两小时 :</view>
			<view class="sub-alarm-range">
				<view class="sub-alarm-range-item">
					<view class="text">下限</view>
					<view class="line"></view>
					<input type="digit" class="value" v-model="BG.downAfter2" />
				</view>
				<view class="sub-alarm-range-item">
					<view class="text">上限</view>
					<view class="line"></view>
					<input type="digit" class="value" v-model="BG.upAfter2" />
				</view>
			</view>

			<view class="save-btn" @click="onSave">保存</view>
		</view>

		<u-picker mode="time" confirm-color="#0dd30c" v-model="show" :params="params" :default-time="timerValue"
			@confirm="onPickerConfirm" @cancle="onPickerCancel"></u-picker>

	</view>
</template>

<script>
	import StorageUtils from '@/utils/StorageUtils';
	import * as UserApi from '@/api/user.js';
	import {
		hideLoading,
		showInfo,
		showLoading
	} from "@/utils/ToastUtils";
	import CacheConfig from '@/config/CacheConfig';

	export default {
		data() {
			return {
				show: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				timerKey: '',
				timerValue: '',
				alarmList: [],
				// 血压
				BP: {
					upSbp: "",
					upDbp: "",
					downSbp: "",
					downDbp: "",
				},
				// 血糖
				BG: {
					breakfastTime: "",
					lunchTime: "",
					dinnerTime: "",
					upEmpty: "",
					upAfter1: "",
					upAfter2: "",
					downEmpty: "",
					downAfter1: "",
					downAfter2: "",
				},
				// 心率
				BPM: {
					upBpm: "",
					downBpm: "",
				},
				// 血氧
				SPO: {
					down: "",
				},
				// 尿酸
				UA: {
					upUa: "",
					downUa: "",
				},
				// 总胆固醇/血脂
				TC: {
					upTc: ""
				},
				// 血酮
				BHB: {
					upBhb: ""
				}
			};
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				const userInfo = StorageUtils.get(CacheConfig.USER_INFO_KEY)
				if (!userInfo.id) return;
				UserApi.getUserAlarm({
					userId: userInfo.id
				}).then(res => {
					console.log("getUserAlarm", res);
					this.alarmList = res.obj;
					this.alarmList.forEach(item => {
						const alarmContent = JSON.parse(item.alarmContent);
						switch (item.alarmType) {
							case 'BP':
								this.BP = {
									upSbp: alarmContent.upSbp,
									upDbp: alarmContent.upDbp,
									downSbp: alarmContent.downSbp,
									downDbp: alarmContent.downDbp,
								}
								break;
							case 'BG':
								this.BG = {
									breakfastTime: alarmContent.breakfastTime,
									lunchTime: alarmContent.lunchTime,
									dinnerTime: alarmContent.dinnerTime,
									upEmpty: alarmContent.upEmpty,
									upAfter1: alarmContent.upAfter1,
									upAfter2: alarmContent.upAfter2,
									downEmpty: alarmContent.downEmpty,
									downAfter1: alarmContent.downAfter1,
									downAfter2: alarmContent.downAfter2,
								}
								break;
							case 'BPM':
								this.BPM = {
									upBpm: alarmContent.upBpm,
									downBpm: alarmContent.downBpm,
								}
								break;
							case 'SPO':
								this.SPO = {
									down: alarmContent.down
								}
								break;
							case 'UA':
								this.UA = {
									downUa: alarmContent.downUa,
									upUa: alarmContent.upUa,
								}
								break;
							case 'TC':
								this.TC = {
									upTc: alarmContent.upTc,
								}
								break;
							case 'BHB':
								this.BHB = {
									upBhb: alarmContent.upBhb,
								}
								break;
						}
					})
				}).catch(err => {
					console.log("getUserAlarm", err);
				})
			},
			onOpenTimerPicker(key) {
				this.timerKey = key;
				this.timerValue = this.BG[key];
				this.show = true;
			},
			onPickerConfirm(e) {
				// console.log("onPickerConfirm", e);
				this.BG[this.timerKey] = `${e.hour}:${e.minute}`;
			},
			onPickerCancel(e) {
				this.show = false;
			},
			onSave() {
				if(!this.BPM.downBpm) {
					showInfo("请输入心率下限");
					return;
				} else if(!this.isNumber(this.BPM.downBpm)) {
					showInfo("心率下限必须是数字");
					return;
				} else if(!this.BPM.upBpm) {
					showInfo("请输入心率上限");
					return;
				} else if(!this.isNumber(this.BPM.upBpm)) {
					showInfo("心率上限必须是数字");
					return;
				} else if(!this.BP.downDbp) {
					showInfo("请输入收缩压下限");
					return;
				} else if(!this.isNumber(this.BP.downDbp)) {
					showInfo("收缩压下限必须是数字");
					return;
				} else if(!this.BP.upDbp) {
					showInfo("请输入收缩压上限");
					return;
				} else if(!this.isNumber(this.BP.upDbp)) {
					showInfo("收缩压上限必须是数字");
					return;
				} else if(!this.BP.downSbp) {
					showInfo("请输入舒缩压下限");
					return;
				} else if(!this.isNumber(this.BP.downSbp)) {
					showInfo("舒缩压下限必须是数字");
					return;
				} else if(!this.BP.upSbp) {
					showInfo("请输入舒缩压上限");
					return;
				} else if(!this.isNumber(this.BP.upSbp)) {
					showInfo("舒缩压上限必须是数字");
					return;
				} else if(!this.UA.downUa) {
					showInfo("请输入尿酸下限");
					return;
				} else if(!this.isNumber(this.UA.downUa)) {
					showInfo("尿酸下限必须是数字");
					return;
				} else if(!this.UA.upUa) {
					showInfo("请输入尿酸上限");
					return;
				} else if(!this.isNumber(this.UA.upUa)) {
					showInfo("尿酸上限必须是数字");
					return;
				} else if(!this.SPO.down) {
					showInfo("请输入血氧上限");
					return;
				} else if(!this.isNumber(this.SPO.down)) {
					showInfo("血氧上限必须是数字");
					return;
				} else if(!this.TC.upTc) {
					showInfo("请输入血酮上限");
					return;
				} else if(!this.isNumber(this.TC.upTc)) {
					showInfo("血酮上限必须是数字");
					return;
				} else if(!this.BHB.upBhb) {
					showInfo("请输入总胆固醇/血脂上限");
					return;
				} else if(!this.isNumber(this.BHB.upBhb)) {
					showInfo("总胆固醇/血脂上限必须是数字");
					return;
				} else if(!this.BG.breakfastTime) {
					showInfo("请输入血糖早饭时间");
					return;
				} else if(!this.BG.breakfastTime) {
					showInfo("请输入血糖午饭时间");
					return;
				} else if(!this.BG.dinnerTime) {
					showInfo("请输入血糖晚饭时间");
					return;
				} else if(!this.BG.downEmpty) {
					showInfo("请输入血糖空腹下限");
					return;
				} else if(!this.isNumber(this.BG.downEmpty)) {
					showInfo("血糖空腹下限必须是数字");
					return;
				} else if(!this.BG.upEmpty) {
					showInfo("请输入血糖空腹上限");
					return;
				} else if(!this.isNumber(this.BG.upEmpty)) {
					showInfo("血糖空腹上限必须是数字");
					return;
				} else if(!this.BG.downAfter1) {
					showInfo("请输入血糖餐后一小时下限");
					return;
				} else if(!this.isNumber(this.BG.downAfter1)) {
					showInfo("血糖餐后一小时下限必须是数字");
					return;
				} else if(!this.BG.upAfter1) {
					showInfo("请输入血糖餐后一小时上限");
					return;
				} else if(!this.isNumber(this.BG.upAfter1)) {
					showInfo("血糖餐后一小时上限必须是数字");
					return;
				} else if(!this.BG.downAfter2) {
					showInfo("请输入血糖餐后两小时下限");
					return;
				} else if(!this.isNumber(this.BG.downAfter2)) {
					showInfo("血糖餐后两小时下限必须是数字");
					return;
				} else if(!this.BG.upAfter2) {
					showInfo("请输入血糖餐后两小时上限");
					return;
				} else if(!this.isNumber(this.BG.upAfter2)) {
					showInfo("血糖餐后两小时上限必须是数字");
					return;
				}

				const alarmObj = {};
				for (var i = 0; i < this.alarmList.length; i++) {
					const item = this.alarmList[i];
					let obj = {
						notifyType: "MESSAGE",
						...this[this.alarmList[i].alarmType]
					};
					console.log("obj", obj);
					delete this.alarmList[i].id;
					this.alarmList[i].alarmContent = JSON.stringify(obj);

					alarmObj[this.alarmList[i].alarmType] = obj;
				}
				// console.log("this.alarmList", JSON.parse(JSON.stringify(this.alarmList)));
				// console.log("alarmObj", alarmObj);
				showLoading();
				UserApi.setAlarmBatch(this.alarmList).then(res => {
					hideLoading();
					showInfo("阈值设置成功");
					StorageUtils.save("ALARM", alarmObj);
				}).catch(err => {
					hideLoading();
					showInfo(err);
				})
			},
			isNumber(str) {
				return /^[-]?\d+(\.\d+)?$/.test(str);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.alarm {
		background-color: #f5f5f7;
		padding: 0 32rpx;
		padding-bottom: 47rpx;

		.title {
			font-family: SourceHanSansCN;
			font-size: 36rpx;
			font-weight: bold;
			color: #1d1a1a;
			margin-top: 38rpx;
		}

		.alarm-range {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.alarm-range-item {
				width: 338rpx;
				height: 101rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

				.text {
					font-family: SourceHanSansCN;
					font-size: 24rpx;
					color: #a7a7a7;
					padding: 0 20rpx;
				}

				.line {
					width: 1rpx;
					height: 60rpx;
					background-color: #d6d6d6;
				}

				.value {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: SourceHanSansCN;
					font-size: 30rpx;
					font-weight: bold;
					color: #1d1a1a;
					text-align: center;
				}
			}
		}

		.alarm-range-wrapper {
			width: 100%;
			height: 1023rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.time-wrapper {
				margin-left: 55rpx;
				margin-top: 35rpx;
				display: flex;
				align-items: center;

				.time-label {
					font-family: SourceHanSansCN;
					font-size: 24rpx;
					color: #595959;
					margin-right: 36rpx;
				}

				.time-value {
					width: 290rpx;
					height: 61rpx;
					border: 1rpx solid #dcdcdc;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 17rpx;
					box-sizing: border-box;

					.value {
						font-family: SourceHanSansCN;
						font-size: 24rpx;
						font-weight: bold;
						color: #989898;
					}
				}

			}

			.sub-title {
				font-family: SourceHanSansCN;
				font-size: 24rpx;
				color: #595959;
				margin-left: 40rpx;
				margin-top: 52rpx;
				margin-bottom: 18rpx;
			}

			.sub-alarm-range {
				display: flex;
				justify-content: space-between;
				padding: 0 40rpx;

				.sub-alarm-range-item {
					width: 290rpx;
					height: 102rpx;
					border-radius: 10rpx;
					background-color: #FFFFFF;
					box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
					display: flex;
					align-items: center;

					.text {
						font-family: SourceHanSansCN;
						font-size: 24rpx;
						color: #a7a7a7;
						padding: 0 20rpx;
					}

					.line {
						width: 1rpx;
						height: 60rpx;
						background-color: #d6d6d6;
					}

					.value {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: SourceHanSansCN;
						font-size: 30rpx;
						font-weight: bold;
						color: #1d1a1a;
						text-align: center;
					}
				}

			}

			.save-btn {
				width: 187rpx;
				height: 59rpx;
				border-radius: 59rpx;
				background-color: #ff790f;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: SourceHanSansCN;
				font-size: 36rpx;
				color: #FFFFFF;
				margin: 40rpx auto;
			}
		}

	}
</style>